<template>
<!-- 快递外卖页面 -->
  <el-card>
    <!-- 搜索条件 -->
    <div class="searchForm">
      <el-form :model="searchForm">
        <!-- 第一行 -->
        <span>标题：</span>
        <el-input v-model="searchForm.title" />
        <el-config-provider :locale="locale">
          <span>创建日期：</span>
          <el-date-picker
            v-model="searchForm.createTime" type="datetimerange" format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" range-separator="至" />
        </el-config-provider>
        <span>状态：</span>
        <el-select v-model="searchForm.state" placeholder="请选择">
          <el-option
            v-for="item in optionState" :key="item.value" :label="item.label" :value="item.value1" />
        </el-select>
        <span>取件点：</span>
        <el-select v-model="searchForm.service" placeholder="请选择">
          <el-option
            v-for="item in optionService" :key="item.value" :label="item.label" :value="item.value2" />
        </el-select>
        <br />
        <!-- 第二行 -->
        <div class="right">
          <el-button class="search" type="primary" icon="Search" size="small" @click="subSearch"
            >搜索</el-button>
          <el-button class="reset" type="info" icon="RefreshRight" size="small" @click="subReset"
            >重置</el-button>
        </div>
        <br />
        <br>
        <hr style="background-color: #5aa2cc; height: 0.5px; border: none" />
      </el-form>
    </div>
    <!-- 新增外卖快递 -->
     <div>
        <el-button type="primary" @click="handleDelivery" class="add" size="small">新增</el-button>
        <Dialog ref="deliveryRef" :deliveryData="deliveryData" @submitSend="submitSend"></Dialog>
        <el-button type="primary" @click="handleService" class="serviceDesk" size="small">收件点维护</el-button>
      </div>
      <hr style="background-color: #e8e8e8; height: 2px; border: none" />
    <!-- 表格 -->
    <div class="common-table">
      <el-table :data="tableDeliveryData" stripe style="width: 100%" height="50vh">
        <el-table-column prop="picker" label="取件人" :key="index" />
        <el-table-column prop="service" label="取件点" :key="index" />
        <el-table-column prop="createTime" label="创建时间" :key="index" />
        <el-table-column prop="state" label="状态" :key="index" />
        <el-table-column fixed="right" label="操作" >
          <template #default = "{ row }">
            <el-button link type="primary" size="small" @click="submitEdit(row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="submitDel(row)">删除</el-button>
            <el-button link type="primary" size="small" @click="submitConfirm(row)">确认取件</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script setup>
import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言
import { ref,reactive } from 'vue'

//搜索表单数据
let searchForm = reactive({
  title: "",
  state: "",
  createTime: "",
  service:"",
});

const defaultTime = new Date(2000, 1, 1, 12, 0, 0);

// 状态选择
const optionState = [
  {
    value1: 0,
    label: "待取件",
  },
  {
    value1: 1,
    label: "已取件",
  },
];

// 取件点选择
const optionService = [
  {
    value2: 0,
    label: "前台",
  },
  {
    value2: 1,
    label: "后厨",
  },
  {
    value2: 2,
    label: "保安室",
  },
];

//搜索列表的查询
const subSearch = () => {
  console.log('searchForm', searchForm)
}

//搜索重置
const subReset = () => {
  searchForm.title = null
  searchForm.createTime = null
  searchForm.state = null
  searchForm.service = null
  console.log('searchFormT-Reset', searchForm)
}

//外卖快递表格数据
const tableDeliveryData =  [
  {
    picker: "赵健",
    service: "前台",
    createTime: "2023-03-30 12:33:33",
    state: "待取件",
  },
  {
    picker: "赵一",
    service: "保安室",
    createTime: "2023-03-30 12:33:33",
    state: "待取件",
  },
]

// 点击编辑
const submitEdit = () => {
  console.log("点击编辑");
}

// 点击删除
const submitDel = () => {
  console.log("点击删除");
}

// 点击确认取件
const submitConfirm = () => {
  console.log("点击确认取件");
}

</script>

<style lang="less" scoped>
.searchForm {
  .el-input,
  .el-select {
    width: 130px;
  }

  span {
    font-size: 14px;
    margin-left: 20px;
  }
  
  .el-button:hover {
    opacity: 0.7;
  }
  .right {
    float: right;
    padding-right: 20px;
    .search {
      margin: 5px;
    }
  }
}

.serviceDesk {
    margin-left: 20px;
}

.el-table {
  font-size: 12px;
  --el-table-header-bg-color: #dadada9d;
}

:deep(.el-table .cell) {
  text-align: center;
}

.el-link {
  font-size: 12px;
  font-family: Arial;
  padding-right: 15px;
}

.main-top {
  height: 20vh;
}

</style>